import React, { Component } from 'react';
import { Icon, Dropdown, Menu, Modal, Radio, Row, Col } from 'antd';

import styles from './index.less'
import { connect } from 'dva';
import Link from 'umi/link';
import ChangePassword from '@/pages/users/components/PasswordForm';

@connect(({ user }) => ({
  unitList: user.unitList || {},
  details: user.details || {},
}))
class TopNavHeader extends Component {
  state = {
    visible: false,
    visiblePwd: false
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'user/queryInfo' }).then(() => {
      const { details } = this.props;
      this.setState({ visiblePwd: details.status === 'temporary' })
    })
  }

  logout = () => {
    sessionStorage.clear();
    this.props.logout()
  };

  changeUnit = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'user/queryUnitList' }).then(() => {
      this.setState({
        visible: true,
      });
    })
  }

  handleOk = e => {
    const { dispatch } = this.props;
    dispatch({ type: 'user/chooseUnit', payload: { id: this.state.value } }).then(() => {
      this.setState({
        visible: false,
      });
    })
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  handlePwdOk = () => {
    this.setState({ visiblePwd: false });
  }

  onChange = e => {
    const { dispatch } = this.props;
    this.setState({
      value: e.target.value,
    })
    dispatch({ type: 'user/queryUnitList' })
  }

  render() {
    const { unitList, details } = this.props
    const { visiblePwd } = this.state;
    const { companyId = null } = details;

    const menu = (
      <Menu>
        <Menu.Item><Link to="/users/info">用户信息</Link></Menu.Item>
        <Menu.Item onClick={this.changeUnit}>切换单位</Menu.Item>
        <Menu.Item onClick={this.logout}>退出</Menu.Item>
      </Menu>
    );

    return (
      <>
        <Dropdown overlay={menu} placement="bottomRight" overlayStyle={{ width: '110px' }}>
          <span className={styles.person}>
            <Icon type="user" style={{ fontSize: '18px' }} /> {'个人中心'}
          </span>
        </Dropdown>
        <Modal
          visible={visiblePwd}
          title="修改密码"
          footer={null}
          onCancel={this.handlePwdOk}
          maskClosable={false}
        >
          <ChangePassword
            onSubmit={this.handlePwdOk}
            firstPwdText="临时密码"
          />
        </Modal>
        <Modal
          title="切换单位"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={800}
          bodyStyle={{ height: 399 }}
        >
          <Radio.Group
            name="radiogroup"
            onChange={this.onChange}
            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}
            defaultValue={companyId}
          >
            <Row style={{ marginTop: 20, height: 300, overflowY: 'auto', overflowX: 'hidden' }}>
              {
                Array.isArray(unitList) && unitList.map(v => (
                  <Col span={12} key={v.id}>
                    <Radio style={{ marginTop: 20, marginLeft: 100 }} value={v.id}>{v.name}</Radio>
                  </Col>
                ))
              }
            </Row>
          </Radio.Group>
        </Modal>
      </>
    )
  }
}

export default TopNavHeader
